body{
       font-family:Microsoft Yahei, Avenir, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif !important;
}
.header2{
       display:none;
}

.header{
	position: fixed;
	float: left;
	width: 100%;
	padding: .5% 0;
	background-color: rgba(0,0,0,.2);
	z-index: 10;
}
.header .logo{
	float: left;
        width:49px;
        heihgt:49px;
}
.header .nav{
	list-style: none;
	float: right;
	width: 60%;
}
.header li{
	list-style: none;
	float: left;
	text-align: center;
}
.header li a{
	float: left;
	width: 100%;
	padding: 13% 0;
	color: #fff;
}
.header li a:hover{
        border-bottom: 2px solid #fff;
}

.content{
	float: left;
    width: 100%;
}
.content2{
	float: left;
    width: 100%;
}
.content2 li{padding: 2% 1%;}
.content2 img{
	width: 100%;
	max-width: 100%;
	height: auto;
}
.content2 img:hover{
        box-shadow:2px 4px 6px #333;
}
.product{
	float: left;
	width: 100%;
	padding: 2% 0;
}
.product2{
	float: left;
	width: 100%;
	background: #e7e7e8;
}
.product3{
	float: left;
	width: 55%;
	margin-right: 5%;
	padding: 2% 0;
}
.product3 p{
	padding: 1% 0;
	margin: 0;
}
.product4{
	float: left;
	width: 40%;
	padding-top:7%; 
}
.program{
	float: left;
	width: 100%;
	padding: 2% 0;
}
.program img{
	margin: auto;
}
.program p{
	float: left;
	width: 100% !important;
	text-align: center;
}
.problem{
	float: left;
	width: 100%;
	padding: 2% 0;
}
.problem .iq{
	float: left;
	background: url(../images/question.png);
	background-size: cover;
	width: 25px;
	height: 25px;
	margin-right: 1%;
}
.problem .ia{
	float: left;
	background: url(../images/answer.png);
	background-size: cover;
	width: 25px;
	height: 25px;
	margin-right: 1%;
}
.download{
	float: left;
	width: 100%;
	padding-top: 5%;
	padding-bottom: 2%;
	background: url(../images/down1.png);
	background-size: cover;
}
.download h2{
	width: 100%;
	color: #fff;
	text-align: center;
	font-weight: 100;
}
.download2{
	padding:25% 0;
}
.download2 img{
        width:45%;
        margin:0 2.5%;
        padding:0;
}
.download2 img:hover{
        border-radius:10px;
        background:rgba(0,0,0,.5)
}
.join{
	float: left;
	width: 100%;
	padding: 2% 0;
}
.join2{
	float: left;
	width: 30%;
	min-height: 320px;
	margin-right: 2%;
	padding: 12.6% 2%;
	background: url(../images/j1.png);
	background-size: cover;
}
.join2 h1{
	text-align: center;
	color: #fff;
	margin:0;
}
.join2 h2{
	text-align: center;
	color: #fff;
	margin:0;
}
.join2 p{
	text-align: center;
	color: #fff;
	margin:0;
}
.join2 img{
	display: block;
	margin: auto;
        width:49px;
        height:49px;
}
.join3{
	padding: 2%; 
	float: left;
	width: 68%;
	min-height: 320px;
	border: 1px solid #333;
}
.join3 a{
	float: right;
	color: #fff;
	background: #0e933d;
	padding: 1% 3%;
	border: 1px solid #0e933d;
}
.join3 a:hover{
	background: #fff;
	color: #0e933d;
}
.join4{
	float: left;
	width: 100%;
	list-style: none;
}
.join4 li{
	padding: 0 1%; 
}
.join4 h2{
	margin: 0;
	padding: 15% 0;
	text-align: center;  
	border: 1px solid #0e933d;
	font-weight: 100;
}
.join5{
	float: left;
	width: 100% !important;
	padding: 3% 0;
}
.join5 img{
	width: 1.5% !important;
	margin-right: 1% !important;
	margin-top: .5% !important;
}
.join5 p{
	margin: 0;
	width: 97.5% !important;
}
.join6{
	float: left;
	width: 100% !important;
}
.join6 img{
	float: left;
	width: 49% !important;
	margin-right: 1% !important;
}
.join7{
	float: left;
	width: 49% !important;
	padding: 3% 0 !important;
	margin-left: 1% !important;
}
.join7 img{
	width: 3% !important;
	margin-right: 2% !important;
	margin-top: 1% !important;
}
.join7 p{
	margin: 0;
	width: 95% !important;
}



.footer{
	float: left;
	width: 100%;
	background-color: #1a1a1a;
	padding:  2% 0;
}
.footer .nav{
	list-style: none;
	float: right;
	width: 100%;
}
.footer li{
	list-style: none;
	float: left;
	/*padding: 2.5% 0;*/
	text-align: center;
	font-size: 1.5rem;
	line-height: 49px;
}
.footer li a{
	float: left;
	width: 100%;
	color: #fff;
}
.footer li a:hover{
	color: #585858;
}
.footer p{
	color: #fff;
	text-align: right;
	font-size: 1.5rem;
	margin: 0; 
}
.footer span{
	font-size: 1rem;
	color: #6c6c6c;
	text-align: right;
}
.footer i{
	padding: .5% 1.7%;
	margin: 0 .5%;
	background: #ff6d00;
	border-radius: 50%;
	color: #fff;
	float: right;
}
.footer i:hover{
	background: #23a9ee;
	border-radius: 50%;
	color: #fff;
	float: right;
}

.xshiden{}

.xscenter{}

@media (max-width:700px){

.header2{
display:block;
width:100%;
float:left;
}
.header{display:none;}

.logo{
position:absolute;
float:left;
width:49px;
z-index:1000000;
top:0;
left:5%;
}

.xshiden{display:none !important;}
.xscenter{float:none !important;margin:auto;display:block;}

.product3{
width:100%;
}

.product3{
width:100%;
}

.product4{
width:100%;
margin:0;
}

.join2{
	float: left;
	width: 100%;
	min-height: 120px;
	margin-right: 0%;
	padding: 2%;
	background: url(../images/j1.png);
	background-size: cover;
}

.join3{
	padding: 2%; 
	float: left;
	width: 100%;
	min-height: 200px;
        margin-top:2%;
	border: 1px solid #333;
}

.join4 br{display:none;}
.join4 h2{min-height:145px;margin-bottom:2%;}

.join6 img{
	float: left;
	width: 100% !important;
	margin-right: 0% !important;
}

.join7{
	float: left;
	width: 100% !important;
	padding: 3% 0 !important;
	margin-left: 0% !important;
}

.join7 img{
        display:none !important;
	width: 3% !important;
	margin-right: 2% !important;
	margin-top: 1% !important;
}

.join7 p{
	margin: 0;
	width: 97.5% !important;
}

.cssanimations [data-am-scrollspy*=animation]{
        opacity: 1;
}
}